<template>
  <div class="addgoods">
    <div class="addgoods_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="taber">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-divider content-position="left">
                <span style="font-size:24px">商品信息</span>
              </el-divider>
              <el-form-item label="商品名称：">
                <span>{{ goodsname }}</span>
              </el-form-item>
              <el-form-item label="商品地址：">
                <a :href="ruleForm.goods_url" target="_blank">{{
                  ruleForm.goods_url
                }}</a>
              </el-form-item>
              <el-form-item label="商品活动：">
                <el-radio v-model="ruleForm.goods_activity" label="1"
                  >定向</el-radio
                >
                <el-radio v-model="ruleForm.goods_activity" label="2"
                  >淘抢购</el-radio
                >
                <el-radio v-model="ruleForm.goods_activity" label="3"
                  >聚划算</el-radio
                >
                <span style="color:red">活动优先审核!</span>
              </el-form-item>
              <el-form-item label="营销活动：">
                <el-radio v-model="ruleForm.marketing_activities" :label="0"
                  >无</el-radio
                >
                <el-radio
                  v-for="item in activity"
                  :key="item.activity_id"
                  v-model="ruleForm.marketing_activities"
                  :label="item.activity_id"
                  >{{ item.activity_name }}</el-radio
                >
              </el-form-item>
              <el-form-item label="商品分类：">
                <el-select
                  v-model="ruleForm.goods_class"
                  @change="classChange"
                  placeholder="请选择商品分类"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <a href="#">问题反馈</a>
              </el-form-item>
              <el-form-item required label="店铺名称：" prop="shop_name">
                <el-input
                  type="text"
                  v-model="ruleForm.shop_name"
                  autocomplete="off"
                  placeholder="必填!请填写店铺名称"
                ></el-input>
                <!-- <div style="color:red">
                  严禁直接复制淘宝标题，查看<a>《短标题规范》</a>
                </div> -->
              </el-form-item>
              <el-form-item required label="店铺押金：" prop="shop_deposit">
                <el-input
                  type="text"
                  v-model="ruleForm.shop_deposit"
                  autocomplete="off"
                  placeholder="请填写店铺押金金额"
                ></el-input>
              </el-form-item>
              <el-form-item required label="商品标题：" prop="goods_name">
                <el-input
                  type="text"
                  v-model="ruleForm.goods_name"
                  autocomplete="off"
                  placeholder="例:品牌+品名+样式+规格等，清楚描述商品，10到20个字"
                ></el-input>
                <div style="color:red">
                  严禁直接复制淘宝标题，查看<a>《短标题规范》</a>
                </div>
              </el-form-item>
              <el-form-item required label="商品主图：" prop="goods_img">
                <el-input
                  type="text"
                  v-model="ruleForm.goods_img"
                  autocomplete="off"
                  placeholder="请选择淘宝图片空间地址"
                ></el-input>
                <div class="chooseurl">
                  <div class="taber_box">
                    <div style="width:100px;height:100px;border:1px solid #000">
                      <!-- <img
                        style="display:block;"
                        :src="ruleForm.goods_img"
                        alt=""
                      /> -->
                      <div class="demo-image__preview">
                        <el-image
                          style="width: 100px; height: 100px"
                          :src="ruleForm.goods_img"
                          :preview-src-list="srcList"
                        >
                          <div slot="error" class="image-slot">
                            <span style="font-size:12px">
                              选择右侧图片之后,点击查看大图
                            </span>
                          </div>
                        </el-image>
                      </div>
                    </div>
                    <el-radio-group
                      v-model="radio"
                      @change="changebar"
                      style="display: flex;justify-content: space-between;align-items: center;"
                    >
                      <!-- <el-radio class="elradio" label="1">全部优惠</el-radio> -->
                      <el-radio-button
                        class="elradio"
                        v-for="item in mainUrl"
                        :key="item"
                        :label="item"
                      >
                        <img
                          style="width: 100px;height:100px;display: inline-block;"
                          :src="`http:` + item"
                          alt=""
                        />
                      </el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <div style="color:red">
                  不符合要求将被扣除次数!<a>《主图规范》</a>
                </div>
              </el-form-item>
              <el-form-item label="商品营销图：" prop="goods_yx_img">
                <el-upload
                  :show-file-list="true"
                  class="avatar-uploader"
                  action="http://gyapi.letuilm.com/upload"
                  :on-success="handleAvatarSuccess1"
                  :multiple="false"
                  :limit="1"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="goods_yx_img"
                    :src="`http://` + goods_yx_img"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div style="color:red">
                  选填，请上传优质营销主图,营销主图的重要性，你懂得!查看<a
                    >《营销主图规范》</a
                  >
                  仅支持JPG. PNG格式图片,文件小于1M
                </div>
              </el-form-item>
              <el-form-item label="实拍图:" prop="relevant_img">
                <div
                  style="display: flex;justify-content: flex-start;align-items: center;width: 650px;"
                >
                  <el-upload
                    class="avatar-uploader"
                    action="http://gyapi.letuilm.com/upload"
                    :on-success="handleAvatarSuccess2"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :multiple="true"
                    :file-list="fileList"
                    :limit="5"
                    list-type="picture"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      v-if="relevant_img"
                      :src="`http://` + relevant_img"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div style="margin-left:10px">
                    <img
                      v-for="item in checkList2"
                      :key="item"
                      style="width: 100px;height:100px;display: inline-block;"
                      :src="`http:` + item"
                      alt=""
                    />
                  </div>
                </div>
                <el-button type="primary" @click="openbuyer">供 选</el-button>
                <div style="color:red">
                  选填，请上传优质商品相关图片，包括但不限于商品实拍图、买家返图、开箱图等相关图片
                  仅支持JPG. PNG格式图片,文件小于1M
                  <a>《商品图样例》</a>
                </div>
              </el-form-item>

              <el-form-item label="营销视频：" prop="marketing_video">
                <!-- :action="videoForm.videoUrl" -->
                <el-upload
                  class="avatar-uploader el-upload--text  videobox"
                  action="http://gyapi.letuilm.com/upload"
                  :show-file-list="false"
                  :on-success="handleVideoSuccess"
                  :before-upload="beforeUploadVideo"
                  :on-progress="uploadVideoProcess"
                >
                  <video
                    v-if="videoForm.marketing_video != '' && videoFlag == false"
                    :src="`http://` + videoForm.marketing_video"
                    class="avatar"
                    style=" width: 500px;height: 200px;"
                    controls="controls"
                  >
                    您的浏览器不支持视频播放
                  </video>
                  <i
                    v-else-if="
                      videoForm.marketing_video == '' && videoFlag == false
                    "
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                  <el-progress
                    v-if="videoFlag == true"
                    type="circle"
                    :percentage="videoUploadPercent"
                    style="margin-top:30px;"
                  ></el-progress>
                </el-upload>
                <div style="color:red">
                  选填，仅支持MP4格式，小于20M,
                  30秒内。请保证你拥有这些视频的使用权!
                  <a>《必读!直推视频提交说明》</a>
                </div>
              </el-form-item>
              <el-form-item label="精推素材：" prop="source_material_url">
                <el-input
                  type="text"
                  v-model="ruleForm.source_material_url"
                  autocomplete="off"
                  placeholder="请输入文档链接"
                ></el-input>
                <div style="color:red">
                  选填，请填写有效的石墨文档或有道云文档的链接(只读)
                  当前商品的精推文案可在普通商品列表修改商品信息时进行管理
                  <a>《精推文案填写规范及要求》</a>
                </div>
              </el-form-item>
              <el-form-item required label="精推文案：" prop="copywriting">
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="ruleForm.copywriting"
                  autocomplete="off"
                  placeholder="如:护发精华+沐浴乳+洗发乳三件套，三瓶都是280ml哦!美女们，赶紧秒起来!超级划算~"
                ></el-input>
                <div style="color:red">
                  20-100字精简文案!突出产品亮点需求痛点为什么值得购买!注意不要用空格!查看
                  <a>《文案规范》</a>
                </div>
              </el-form-item>
              <el-form-item label="朋友圈文案：" prop="friend_circle">
                <el-input
                  id="emojiInput"
                  type="textarea"
                  :rows="5"
                  v-model="ruleForm.friend_circle"
                  autocomplete="off"
                  placeholder="每行字数控制在18个汉字以内(包含适当表情)，总行数不超过6行，能在朋友國有较好的展示效果"
                ></el-input>
                <!-- 选择表情 -->
                <div>
                  <!-- <VEmojiPicker @select="selectEmoji" /> -->
                  <!-- <emoji></emoji> -->
                  <div id="exampleInputEmoji">
                    <el-button @click="toogleDialogEmoji">选择表情😃</el-button>
                    <VEmojiPicker
                      v-show="showDialog"
                      labelSearch="Search"
                      lang="pt-BR"
                      @select="onSelectEmoji"
                    />
                  </div>
                </div>
                <div style="color:red">
                  爆款必填内容，还有机会上架商品库首页，获取更多流量
                </div>
              </el-form-item>
              <el-form-item label="特殊活动：">
                <el-input
                  type="text"
                  v-model="ruleForm.special_activity"
                  autocomplete="off"
                  placeholder="4-10个字, 商品额外的优惠信息"
                ></el-input>
                <div style="color:red">
                  选填,填写后将增加商品展示权重,吸引更多流量,请规范填写
                  <a href="#">《特殊活动填写规范》</a>
                  填写示例:买-送一.第2件0元、前30分钟半价等。
                </div>
              </el-form-item>
              <el-form-item label="开始时间：">
                <el-radio v-model="ruleForm.whether_start" label="1"
                  >立即开始</el-radio
                >
                <el-radio v-model="ruleForm.whether_start" label="2"
                  >预告</el-radio
                >
              </el-form-item>
              <el-form-item
                label="预告时间："
                v-if="ruleForm.whether_start == 2"
              >
                <el-date-picker
                  v-model="ruleForm.start_time"
                  value-format="timestamp"
                  format="MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择预告开始日期时间"
                  :picker-options="startTimeOpt"
                >
                </el-date-picker>
              </el-form-item>
              <el-divider content-position="left">
                <span style="font-size:24px">优惠券信息</span>
              </el-divider>
              <el-form-item label="优惠卷类型：">
                <el-radio v-model="ruleForm.coupon_type" label="1"
                  >阿里妈妈券</el-radio
                >
                <!-- <el-radio v-model="ruleForm.market" label="2"
                  >55吾折天盛典</el-radio
                > -->
              </el-form-item>
              <el-form-item required label="优惠卷链接：" prop="coupon_url">
                <el-input
                  type="text"
                  v-model="ruleForm.coupon_url"
                  autocomplete="off"
                  placeholder="填写优惠券原始链接"
                  @blur="doCoupon"
                ></el-input>
                <div style="color:red">查看<a>《优惠券填写说明》</a></div>
              </el-form-item>
              <el-form-item required label="优惠卷总量：" prop="coupon_num">
                <el-input
                  type="text"
                  style="width:120px"
                  v-model="ruleForm.coupon_num"
                  autocomplete="off"
                >
                  <span slot="suffix">张</span></el-input
                >
                <div style="color:red">
                  优惠券原始总量，非剩余量!券总量需≥500张
                </div>
              </el-form-item>
              <el-form-item required label="商品原价：" prop="goods_price">
                <el-input
                  type="text"
                  style="width:120px"
                  v-model="ruleForm.goods_price"
                  autocomplete="off"
                  @blur="addprice"
                >
                  <span slot="suffix">元</span></el-input
                >
                <div style="color:red">
                  注:如果商品有多种类型,只显示最低价
                </div>
              </el-form-item>
              <el-form-item
                required
                label="劵后单价："
                prop="after_coupon_price"
              >
                <el-input
                  type="text"
                  style="width:120px"
                  v-model="ruleForm.after_coupon_price"
                  autocomplete="off"
                >
                  <span slot="suffix">元</span></el-input
                >
                <div style="color:red">
                  领券后拍下单件价格，包含满减、打折、定金立减，不包含品类券、津贴!
                  量贩券 .
                  <a> 《量贩券商品提交说明及流量扶持》 </a>
                </div>
              </el-form-item>
              <el-form-item required label="优惠卷金额：" prop="coupon_price">
                <el-input
                  type="text"
                  style="width:120px"
                  v-model="ruleForm.coupon_price"
                  autocomplete="off"
                >
                  <span slot="suffix">元</span></el-input
                >
              </el-form-item>
              <el-form-item required label="服务费：" prop="service_rate">
                <el-input
                  type="text"
                  style="width:120px"
                  v-model="ruleForm.service_rate"
                  autocomplete="off"
                >
                  <span slot="suffix">%</span></el-input
                >
              </el-form-item>
              <el-form-item required label="佣金比例：" prop="commission_than">
                <el-input
                  type="text"
                  style="width:120px"
                  v-model="ruleForm.commission_than"
                  autocomplete="off"
                >
                  <span slot="suffix">%</span></el-input
                >
                <!-- <div style="color:red"></div> -->
              </el-form-item>
              <el-form-item label="团长链接：">
                <el-input
                  type="text"
                  v-model="ruleForm.group_link"
                  autocomplete="off"
                  placeholder="如htp:/scdick.taobao.om/e***Rw?pid=mm.0.0. 0"
                >
                </el-input>
                <div style="color:red">
                  选填，填写后平台转链将优先使用团长链接，填写前请务必查看
                  <a> 《团长链接填写说明》 </a>
                </div>
              </el-form-item>
              <el-form-item label="其他优惠：" prop="other_discount">
                <el-input
                  type="text"
                  v-model="ruleForm.other_discount"
                  autocomplete="off"
                  placeholder="满减"
                >
                  <!-- <span slot="suffix">元</span> -->
                </el-input>
                <a>修改</a>
              </el-form-item>
              <el-form-item label="" prop="checked">
                <el-checkbox v-model="ruleForm.checked">
                  我已阅读并了解商品 <a>《信息提交规范》</a></el-checkbox
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >发布商品</el-button
                >
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="系统抓取的商品实拍图信息(最多选取5张)"
      :visible.sync="buyeropen"
      width="1000"
      :before-close="handleClose"
    >
      <div class="buyer_box">
        <el-checkbox-group
          v-if="buyersShow.length > 0"
          v-model="checkList"
          @change="changecheck"
          :min="0"
          :max="5"
          style="display: flex;justify-content: space-between;align-items: center;flex-wrap:wrap"
        >
          <el-checkbox v-for="item in buyersShow" :key="item" :label="item">
            <img
              style="width: 130px;height:200px;display: inline-block;draggable='false'"
              :src="`http:` + item"
              alt=""
            />
          </el-checkbox>
        </el-checkbox-group>
        <div v-else>
          <h3>
            Sorry!该商品暂无实拍图,请手动上传!
          </h3>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="dosure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import emoji from "@/components/emoji.vue";
import VEmojiPicker, { emojisDefault, categoriesDefault } from "v-emoji-picker";
// import VEmojiPicker from "v-emoji-picker";
import {
  userAddGoods,
  getActivityList
  // goodsTesting
} from "@/api/userinfo/userinfo";
import { checkCouponUrl, getGoodsCommentImg } from "@/api/upgoods/upgoods";

import { getClassInfo } from "@/api/goods/goods";

export default {
  name: "teamset",
  components: {
    VEmojiPicker
    // emoji
  },
  data() {
    var shop_deposit = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入店铺押金!"));
      } else {
        callback();
      }
    };
    var shop_name = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入店铺名称!"));
      } else {
        callback();
      }
    };
    var goods_name = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入商品标题!"));
      } else {
        callback();
      }
    };
    var goods_img = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请上传商品主图!"));
      } else {
        callback();
      }
    };
    var goods_yx_img = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请上传营销图!"));
      } else {
        callback();
      }
    };
    var relevant_img = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请上传商品相关图!"));
      } else {
        callback();
      }
    };
    var marketing_video = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请上传营销视频!"));
      } else {
        callback();
      }
    };
    var source_material_url = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入精推素材链接!"));
      } else {
        callback();
      }
    };
    var copywriting = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入商品文案!"));
      } else {
        callback();
      }
    };
    var friend_circle = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入朋友圈文案!"));
      } else {
        callback();
      }
    };
    var coupon_url = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入优惠卷地址!"));
      } else {
        callback();
      }
    };
    var coupon_num = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入优惠卷数量!"));
      } else {
        callback();
      }
    };
    var after_coupon_price = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入劵后价!"));
      } else {
        callback();
      }
    };
    var other_discount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入其他优惠信息!"));
      } else {
        callback();
      }
    };
    var checked = (rule, value, callback) => {
      if (value === false) {
        callback(new Error("请同意提交规范!"));
      } else {
        callback();
      }
    };
    return {
      startTimeOpt: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      flag: false,
      tb_goods_id: "",
      srcList: [
        // "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        // "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ],
      radio: "",
      class_id: "",
      goodsname: "",
      mainUrl: [],
      activity: [],
      ruleForm: {
        goods_url: "", //商品地址
        goods_activity: "1", //商品活动
        marketing_activities: 0, //营销活动
        goods_class: "", //分类名称
        shop_name: "", //店铺名称
        shop_deposit: "", //店铺押金
        goods_name: "", //商品标题
        goods_img: "", //商品主图
        goods_yx_img: "", //商品营销图
        relevant_img: "", //相关商品图
        marketing_video: "", //营销视频
        source_material_url: "", //精推素材
        copywriting: "", //精推文案
        friend_circle: "", //朋友圈文案
        special_activity: "", //特殊活动
        start_time: "", //开始时间
        coupon_type: "1", //优惠卷类型
        coupon_url: "", //优惠卷链接
        coupon_num: "", //优惠卷总量
        after_coupon_price: "", //劵后单价
        group_link: "", //团长链接
        other_discount: "", //其他优惠
        checked: false, //勾选同意
        goods_price: "", //商品原价
        commission_than: "", //佣金比例
        service_rate: "", //服务费
        coupon_price: "", // 优惠卷金额
        seller: {}, //淘宝接口返回的数据
        goods_short_title: "", //商品短标题
        tb_goods_id: "", //淘宝商品id
        whether_start: "1", //预告 立即开始
        live_shooting_img: "" //实拍图
      },
      rules: {
        shop_name: [{ validator: shop_name, trigger: "blur" }],
        shop_deposit: [{ validator: shop_deposit, trigger: "blur" }],
        goods_name: [{ validator: goods_name, trigger: "blur" }],
        goods_img: [{ validator: goods_img, trigger: "blur" }],
        goods_yx_img: [{ validator: goods_yx_img, trigger: "blur" }],
        relevant_img: [{ validator: relevant_img, trigger: "blur" }],
        marketing_video: [{ validator: marketing_video, trigger: "blur" }],
        source_material_url: [
          { validator: source_material_url, trigger: "blur" }
        ],
        copywriting: [{ validator: copywriting, trigger: "blur" }],
        friend_circle: [{ validator: friend_circle, trigger: "blur" }],
        coupon_url: [{ validator: coupon_url, trigger: "blur" }],
        coupon_num: [{ validator: coupon_num, trigger: "blur" }],
        after_coupon_price: [
          { validator: after_coupon_price, trigger: "blur" }
        ],
        other_discount: [{ validator: other_discount, trigger: "blur" }],
        checked: [{ validator: checked, trigger: "blur" }]
      },
      options: [],
      goods_yx_img: "",
      relevant_img: "",
      videoForm: {
        marketing_video: ""
        // uploadUrl: "http://gyapi.letuilm.com/upload"
      },
      videoFlag: false,
      videoUploadPercent: 0,
      urlStr: "",
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        // }
      ],
      itemid: "",
      priceMoney: "",
      single_sum: "",
      copumoney: "",
      // 表情
      showDialog: false,
      buyeropen: false,
      buyersShow: [], //拱选列表
      checkList: [], //多选选中
      checkList2: [] //多选选中
    };
  },

  computed: {},
  created() {
    console.log(
      Date.parse(new Date())
        .toString()
        .substr(0, 10)
    );
    this.getClassInfo();
    this.getActivityList();
    if (this.$ls.get("seller")) {
      this.ruleForm.seller = this.$ls.get("seller");
      console.log(this.ruleForm.seller);
    }
    if (this.$ls.get("tbinfo")) {
      var tbinfo = this.$ls.get("tbinfo");
      console.log("tbinfo", tbinfo);
      this.goodsname = tbinfo.title;
      this.itemid = tbinfo.itemId;
      this.ruleForm.tb_goods_id = tbinfo.itemId;
      this.ruleForm.shop_name = tbinfo.shopName;
      this.priceMoney = parseInt(tbinfo.priceMoney);
      this.mainUrl = tbinfo.images;
    } else {
      this.$message.error("请重新检测商品!");
    }
    if (this.$ls.get("goodsinfo")) {
      var goodsinfo = this.$ls.get("goodsinfo");
      console.log("goodsinfo", goodsinfo);
      this.ruleForm.goods_class = goodsinfo.class_id;
      this.ruleForm.source_material_url = goodsinfo.source_material_url;
      this.ruleForm.shop_deposit = goodsinfo.shop_deposit;
      this.ruleForm.goods_img = goodsinfo.goods_img;
      this.ruleForm.goods_short_title = goodsinfo.goods_short_title;
      this.srcList.push(this.ruleForm.goods_img);
      this.tb_goods_id = goodsinfo.id;
      this.ruleForm.copywriting = goodsinfo.copywriting;
      this.ruleForm.friend_circle = goodsinfo.friend_circle;
      this.videoForm.marketing_video = goodsinfo.marketing_video;
      this.goods_yx_img = goodsinfo.goods_yx_img;
    } else {
      this.$message.error("请重新检测商品!");
    }
    if (this.$route.query) {
      this.ruleForm.goods_url = this.$route.query.url;
    }
  },
  mounted() {
    console.log(categoriesDefault);
    console.log("Total emojis:", emojisDefault.length);
  },
  methods: {
    dosure() {
      this.buyeropen = false;
      // console.log("多选选中list", this.checkList);
      if (this.checkList2.length < 5) {
        for (let i = 0; i < this.checkList.length; i++) {
          if (this.checkList2.length < 5) {
            // console.log(this.checkList2.length);
            this.checkList2.push(this.checkList[i]);
          }
        }
      } else {
        this.$message.info("Sorry!实拍图已经上传5张了");
      }
    },
    changecheck(val) {
      console.log("多选选中", val);
      console.log("多选选中list", this.checkList);
    },
    handleClose() {
      this.buyeropen = false;
      // this.form = this.$options.data().form;
      this.checkList = [];
    },
    openbuyer() {
      this.getGoodsCommentImg(this.tb_goods_id);
      this.buyeropen = true;
    },
    //获取买家秀
    getGoodsCommentImg(goods_id) {
      getGoodsCommentImg({
        goods_id: goods_id
      })
        .then(res => {
          if (res.code == 200) {
            console.log("买家秀返回", res);
            this.buyersShow = res.data.split(",");
            console.log(this.buyersShow);
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //获取营销活动
    getActivityList() {
      getActivityList({
        page: 1,
        pagesize: 99999,
        type: 1
      })
        .then(res => {
          if (res.code == 200) {
            console.log("活动列表", res.data.data);
            this.activity = res.data.data;
            // this.$message.success("成功!");
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 表情
    toogleDialogEmoji() {
      this.showDialog = !this.showDialog;
    },
    onSelectEmoji(emoji) {
      // console.log(emoji.data);
      // this.ruleForm.friend_circle += emoji.data;
      // console.log(this.ruleForm.friend_circle);
      var elInput = document.getElementById("emojiInput");
      // console.log(elInput);
      //根据id选择器选中对象
      var startPos = elInput.selectionStart; // input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd; // 选中的字符到最后的字符
      // console.log(startPos, " --- ", endPos);
      if (startPos === undefined || endPos === undefined) return;
      var txt = elInput.value;
      // 将表情添加到选中的光标位置
      var result =
        txt.substring(0, startPos) + emoji.data + txt.substring(endPos);
      elInput.value = result; // 赋值给input的value
      // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + emoji.data.length;
      elInput.selectionEnd = startPos + emoji.data.length;
      this.ruleForm.friend_circle = result; // 赋值
    },
    goodsTesting() {
      if (this.$ls.get("goodsinfo")) {
        var goodsinfo = this.$ls.get("goodsinfo");
        this.goodsname = goodsinfo.goods_title;
        this.ruleForm.goods_class = goodsinfo.class_id;
        this.ruleForm.shop_name = goodsinfo.shop_name;
        this.mainUrl = goodsinfo.zt_array;
        this.activity = goodsinfo.activity;
        this.tb_goods_id = goodsinfo.tb_goods_id;
        this.ruleForm.copywriting = goodsinfo.data.copywriting;
        this.ruleForm.friend_circle = goodsinfo.data.friend_circle;
        this.videoForm.marketing_video = goodsinfo.data.marketing_video;
        this.goods_yx_img = goodsinfo.data.goods_yx_img;
        var filterArr = this.options.filter(
          e => e.id === this.ruleForm.goods_class
        );
        this.ruleForm.goods_class_name = filterArr[0].name;
        console.log(this.ruleForm.goods_class_name);
      } else {
        this.$message.error("请重新检测商品!");
      }
    },
    addprice() {
      console.log(this.ruleForm.goods_price, this.priceMoney);
      console.log(this.single_sum);
      console.log(this.copumoney);
      if (this.single_sum === "") {
        this.$message.info("请先检测优惠卷");
      } else {
        this.ruleForm.after_coupon_price =
          this.ruleForm.goods_price - this.copumoney;
      }
    },
    doCoupon() {
      console.log(this.ruleForm.coupon_url);
      // this.ruleForm.coupon_url =
      //   "https://uland.taobao.com/quan/detail?sellerId=2800657180&activityId=fdfe4274c5664de6b7936f803952f02a"; //
      // this.ruleForm.coupon_url =
      //   "https://uland.taobao.com/quan/detail?sellerId=2206955526360&activityId=2ad5b226c2b749edbba778f1d1c88edf"; //新
      // var reg = /itemId=(\d+)/i;
      // this.ruleForm.coupon_url.match(reg);
      // const idArr = this.ruleForm.coupon_url.match(reg);
      // console.log("商品id", idArr[1]);
      console.log("商品id:606540358182", this.itemid);
      checkCouponUrl({
        coupon_url: this.ruleForm.coupon_url,
        item_id: this.itemid
        // item_id: "597303616523"
      })
        .then(res => {
          console.log("优惠卷信息", res);
          if (res.code === 200) {
            this.ruleForm.coupon_num = res.data.couponnum;
            this.ruleForm.coupon_price = parseInt(res.data.money);
            this.single_sum = parseInt(res.data.single_sum);
            this.copumoney = parseInt(res.data.money);
            // console.log(this.priceMoney);
            // console.log(this.single_sum);
            if (this.single_sum < this.priceMoney) {
              this.ruleForm.goods_price = this.priceMoney;
              this.ruleForm.after_coupon_price = (
                this.priceMoney - this.copumoney
              ).toFixed(2);
              // console.log(this.ruleForm.goods_price);
              // console.log(this.ruleForm.after_coupon_price);
            } else {
              this.ruleForm.goods_price = "";
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
      // couponTesting({
      //   coupon_link: this.ruleForm.coupon_url,
      //   goods_id: this.tb_goods_id
      // })
      //   .then(res => {
      //     console.log("优惠卷信息", res);
      //     this.ruleForm.coupon_num = res.data.couponTotalCount;
      //     this.ruleForm.after_coupon_price = res.data.priceAfterCoupon;
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    changebar(e) {
      console.log(e);
      this.srcList = [];
      this.srcList.push("http:" + e);
      this.ruleForm.goods_img = this.srcList[0];
      console.log(this.srcList);
    },
    getClassInfo() {
      this.options = [];
      getClassInfo()
        .then(res => {
          console.log("商品分类", res);
          this.options.push(...res.data);
          var filterArr = this.options.filter(
            e => e.id === this.ruleForm.goods_class
          );
          console.log("filterArr", filterArr);
          this.ruleForm.goods_class_name = filterArr[0].name;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 表情
    doadd(e) {
      console.log("ClickedEnter", e);
      this.ruleForm.friend_circle = this.ruleForm.friend_circle + e;
      console.log(this.ruleForm.friend_circle);
    },
    //   上传视频
    handleVideoSuccess(res, file) {
      //获取上传图片地址
      console.log(file);
      // console.log("视频返回", res);
      this.videoFlag = false;
      // this.videoUploadPercent = 0;
      // if (res.status == 200) {
      // console.log(res.substring(0, 120));
      // const url = JSON.parse(res.substring(0, 119)).data.url;
      const url = res.data.url;
      console.log("返回", url);
      this.ruleForm.marketing_video = url;
      this.videoForm.marketing_video = url;
      // this.videoForm.videoUploadId = res.data.uploadId;
      // } else {
      //   this.$message.error("视频上传失败，请重新上传！");
      // }
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 20;
      if (
        [
          "video/mp4"
          //   "video/ogg",
          //   "video/flv",
          //   "video/avi",
          //   "video/wmv",
          //   "video/rmvb"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过20MB哦!");
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList) {
      console.log(fileList);
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage;
    },
    //   上传主图
    handleAvatarSuccess1(res, file) {
      console.log("返回", res, file.raw);
      // console.log("返回", res.substring(0, 120));
      const url = res.data.url;
      console.log("返回", url);
      this.ruleForm.goods_yx_img = url;
      this.goods_yx_img = url;
      // http://img.letuilm.com/2020/05/faa3962020051213542219757.jpeg
      // this.goods_yx_img = URL.createObjectURL(file.raw);
      console.log("商品主图", this.ruleForm.goods_yx_img);
      // console.log(file.raw);
    },
    // 上传相关图
    handleAvatarSuccess2(res, file, fileList) {
      console.log("返回", res, file.raw);
      console.log("返回fileList", fileList);
      this.urlStr = "";
      if (fileList.length > 0) {
        this.checkList2 = [];
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          // this.urlStr += fileList[i].response.data.url + ",";
          this.checkList2.push("//" + fileList[i].response.data.url);
        }
      }
    },
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      console.log("相关图file", file);
      console.log("相关图fileList", fileList);
      this.urlStr = "";
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          this.urlStr += fileList[i].response.data.url + ",";
        }
      }
      this.urlStr = this.urlStr.substring(0, this.urlStr.length - 1);
      console.log("urlStr", this.urlStr);
    },
    handlePreview(file) {
      console.log("xiangguantu", file);
    },
    //   分类切换
    classChange(val) {
      this.ruleForm.goods_class = val;
      var filterArr = this.options.filter(e => e.id === val);
      console.log("filterArr", filterArr);
      this.ruleForm.goods_class_name = filterArr[0].name;
      console.log("this.ruleForm.goods_class", val);
    },

    submitForm(formName) {
      // this.ruleForm.relevant_img = this.urlStr;
      // this.ruleForm.goods_url = this.ruleForm.goodsurl;
      // console.log("相关图列表", this.ruleForm.relevant_img);
      // console.log("开始时间", this.ruleForm.start_time);
      console.log("表单内容", this.ruleForm);
      this.$refs[formName].validate(valid => {
        console.log("valid", valid);
        if (
          this.ruleForm.shop_name !== "" &&
          this.ruleForm.shop_deposit !== "" &&
          this.ruleForm.goods_name !== "" &&
          this.ruleForm.goods_price !== "" &&
          this.ruleForm.goods_img !== "" &&
          this.ruleForm.copywriting !== "" &&
          this.ruleForm.coupon_url !== "" &&
          this.ruleForm.coupon_num !== "" &&
          this.ruleForm.goods_price !== "" &&
          this.ruleForm.commission_than !== "" &&
          this.ruleForm.service_rate !== "" &&
          this.ruleForm.coupon_price !== "" &&
          this.ruleForm.after_coupon_price !== ""
        ) {
          if (this.ruleForm.after_coupon_price > 0) {
            if (this.ruleForm.whether_start == 1) {
              console.log(this.ruleForm.start_time);
              const newdata = Date.parse(new Date())
                .toString()
                .substr(0, 10);
              this.ruleForm.start_time = parseInt(newdata);
            } else {
              this.ruleForm.start_time = parseInt(
                this.ruleForm.start_time.toString().substr(0, 10)
              );
            }
            // this.ruleForm.live_shooting_img
            // this.checkList2;
            if (this.checkList2.length > 0) {
              for (var i = 0; i < this.checkList2.length; i++) {
                this.urlStr += this.checkList2[i] + ",";
              }
            }
            this.urlStr = this.urlStr.substring(0, this.urlStr.length - 1);
            console.log(this.urlStr);
            this.ruleForm.live_shooting_img = this.urlStr;
            userAddGoods(this.ruleForm)
              .then(res => {
                console.log(res);
                if (res.code === 200) {
                  this.$message.success("新增成功!");
                  this.$router.push({ path: "/userinfo/uporder" });
                } else {
                  this.$message.error(res.msg);
                }
                // this.ruleForm = {};
                // this.videoForm = {};
                // this.goods_yx_img = "";
                // this.relevant_img = "";
              })
              .catch(err => {
                this.$message.error(err.msg);
                console.log(err);
              });
          } else {
            this.$message.error("劵后单价必须大于0!");
          }
        } else {
          this.$message.info("请查看带星的必填项!");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.buyer_box::v-deep {
  width: 100%;
  height: 800px;
  overflow: auto;
  .el-checkbox__input {
    display: none;
  }
  .is-checked {
    border: 3px solid blue;
  }
  .el-checkbox__label {
    padding-left: 0px;
  }
  .el-checkbox {
    display: inline-block;
    width: 136px;
    height: 206px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .el-checkbox__label {
    box-sizing: border-box;
  }
}
#exampleInputEmoji::v-deep {
  position: relative;
  #EmojiPicker {
    position: absolute;
    z-index: 10;
  }
  #InputSearch {
    display: none !important;
  }
}
.chooseurl {
  width: 650px;
  .taber_box::v-deep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .el-radio__input {
      display: none;
    }
    .el-radio-button__inner {
      padding: 1px;
      // border: 2px solid #000;
      border: none;
    }
    // .elradio {
    // }
  }
}
.addgoods {
  // width: 970px;
  box-sizing: border-box;
  .videobox::v-deep {
    width: 500px !important;
    .el-upload--text {
      width: 100%;
    }
  }
  .addgoods_main::v-deep {
    // width: 970px;
    .taber {
      width: 600px;
      margin: 0 auto;
      // 上传logo
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
      .avatar {
        width: 100px;
        height: 100px;
        display: block;
      }
      .goodsurl {
        width: 500px;
        margin: 10px;
        .el-input__inner {
          // font-weight: bold;
          height: 47px;
          box-sizing: border-box;
          background-color: #f7f8fa;
          border: 2px solid rgb(224, 224, 224);
        }
        .el-input__inner:hover {
          border: 2px solid #6183ff;
        }
      }
    }
    .info {
      width: 500px;
      margin: 25px 225px;
      box-sizing: border-box;
      padding: 15px;
      background-color: #eff3f7;
    }
  }
}
</style>
